<template>
    <div>
        <h2 style="font-size:20px;color:blue;line-height:30px">服装分类</h2>
         <Row>
            <Col span="6">
                <Tree :data="data" @on-select-change="adc"></Tree>
            </Col>
            <Col span="6">
                <div>
                    <Button type="info" @click="addcate">添加</Button>
                    <Button type="primary" @click="editcate">修改</Button>
                    <Button type="error" @click="delcate">删除</Button>
                </div>
                <br><hr>
                <div>
                <div v-show="addform">
                    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="标题：" prop="title">
            <Input v-model="formValidate.title" placeholder="Enter your title"></Input>
        </FormItem>

        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
    </div>
                </div>
            </Col>
        </Row>
    </div>
</template>
<script>
export default {
    data(){
        return {
            addform:false,
             formValidate: {
                 title:'',
                 parentId:'',
                 label:'',
                 value:"",
                 type:2
             },
            data:[],
            id:0,
            ruleValidate: {
                title: [
                    { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                ]
            },
        }
    },
    methods:{
        getlistData(){
            this.axios({
            url:`http://localhost:3000/cate/list/2`,
            method:'get',
            
        }).then(res=>{
            
            this.data=res.data
        })
        },
        adc(select){
            this.formValidate.parentId=select[0]._id
        },
        addcate(){
        
           this.addform=true
        },
        editcate(params){
            this.addform=true
            this.axios({
                url:`http://localhost:3000/cate/data/${this.formValidate.parentId}`,
                method:'get'
            }).then(res=>{
                this.formValidate=res.data;
                this.id=res.data._id
            })
        },
        delcate(){
            this.$Modal.confirm({
                title: '确认删除数据？',
                content: '<p>你确认删除该条数据吗？</p>',
                onOk:()=>{
                    this.axios({
                        url:`http://localhost:3000/cate/data/${this.formValidate.parentId}`,
                        method:'delete'
                    }).then(res=>{
                        console.log(res)
                        this.$Message.info('删除数据成功')
                        this.getlistData()
                    })
                },
                onCancel: () => {
                    this.$Message.info('取消删除');
                }
            })
        },
        handleSubmit (name) {
            
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.id!=0){
                            this.formValidate.label=this.formValidate.title;
                            this.axios({
                                url:`http://localhost:3000/cate/data/${this.id}`,
                                method:'put',
                                data:this.formValidate
                            }).then(res=>{
                                this.$Message.success('Success!');
                                this.getlistData();
                                 this.id=0;
                                 this.$refs[name].resetFields();
                            })
                        }else{
                            this.formValidate.label=this.formValidate.title;
                            this.formValidate.value=this.formValidate.parentId
                            this.axios({
                            url:'http://localhost:3000/cate/data',
                            method:'post',
                            data:this.formValidate
                        }).then(res=>{
                            this.$Message.success('Success!');
                            this.getlistData();
                            this.$refs[name].resetFields();
                        })
                        }
                        
                        
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
               this.$refs[name].resetFields();
        }
    },
    
    mounted(){
        this.getlistData()
    }
}
</script>

